<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div>
    <div class="u-main">
      <div class="u-tab-wrap">
        <ul class="u-tab clearfix">
          <li class="current"><a>资金记录</a></li></ul>
      </div>
      <div class="u-form-wrap">
        <table class="u-table">
          <tbody>
          <tr>
            <th>
              <el-tooltip class="item" effect="dark" content="资金总额=可用余额+冻结金额+待收总额" placement="top-start">
              <el-button>资金总额</el-button>
              </el-tooltip>
            </th>
            <th>
              <el-tooltip class="item" effect="dark" content="总收益=可用余额+冻结金额" placement="top-start">
                <el-button>总收益</el-button>
              </el-tooltip>
            </th>
            <th>
              <el-tooltip class="item" effect="dark" content="可用余额=资金总额-冻结总额-待收总额，账户余额可用于投标或者提现" placement="top-start">
                <el-button>总投资</el-button>
              </el-tooltip>
            </th>
            <th>
              <el-tooltip class="item" effect="dark" content="待收总额是您借款给别人但是还没收回的本息总额" placement="top-start">
                <el-button>待收总额</el-button>
              </el-tooltip>
            </th>
            <th>
              <el-tooltip class="item" effect="dark" content="充值总额=可用余额+冻结金额+待收总额" placement="top-start">
                <el-button>充值总额</el-button>
              </el-tooltip>
            </th>
          </tr>
          <tr>
            <td>
              {{mymoneyForAll.useramount}}
            </td>
            <td>
              {{mymoneyForAll.usergetmoney}}
            </td>
            <td>
              {{mymoneyForAll.userpaymoney}}
            </td>
            <td>
              {{mymoneyForAll.userbeforegetmoney}}
            </td>
            <td>
              {{mymoneyForAll.userchargemoney}}
            </td>
          </tr>
          </tbody>
        </table>
        <div class="m-sub-til" style="padding: 0;">
          资金记录查询</div>
        <table class="u-table">
          <tbody>
          <tr>
            <td colspan="3">
              <div class="tab-search">
                <template>
                  <span class="demonstration">类型:</span>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      <span style="float: left">{{ item.label }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                  </el-select>
                  <!--<div class="block">-->
                  <span class="demonstration">时间查询:</span>
                  <el-date-picker
                    v-model="mymoneytime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                  <!--</div>-->
                </template>
                <div class="i-item-btn">
                  <button id="do_search" class="i-btn-txt3"  @click="searchBycons">查询</button>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="m-sub-til" style="padding: 0;">
          资金历史记录</div>
        <el-table
          :data="mymoneyHistory.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          style="width: 100%">
          <el-table-column
            prop="zongPaytime"
            label="时间"
            width="180">
            <template slot-scope="scope">
              <p>{{scope.row.zongPaytime | timefilters }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="zongPaytype"
            label="类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="zongPaymoney"
            label="支出/收益">
          </el-table-column>
          <el-table-column
            prop="zongBalance"
            label="可用余额">
          </el-table-column>
          <el-table-column
            prop="zongReceived"
            label="待收金额">
          </el-table-column>
          <el-table-column
            prop="zongPayservice"
            label="手续费">
          </el-table-column>
          <el-table-column
            prop="address"
            label="备注">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button  @click="handleClick(scope.row)" type="primary" style="margin-left: 16px;">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false">
          <p style="font-size: 24px">zongId:{{userZong.zongId}}</p>
          <p style="font-size: 24px">userId:{{userZong.userId}}</p>
          <p style="font-size: 24px">investId:{{userZong.investId}}</p>
          <p style="font-size: 24px">zongPaytime:{{userZong.zongPaytime}}</p>
          <p style="font-size: 24px">zongPaytype:{{userZong.zongPaytype}}</p>
          <p style="font-size: 24px">zongPaymoney:{{userZong.zongPaymoney}}</p>
          <p style="font-size: 24px">zongPayservice:{{userZong.zongPayservice}}</p>
          <p style="font-size: 24px">zongBalance:{{userZong.zongBalance}}</p>
          <p style="font-size: 24px">zongReceived:{{userZong.zongReceived}}</p>
        </el-drawer>

        <!--分页-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mymoneyHistory.total">
          </el-pagination>
        </div>

        </div>
      </div>
  </div>
</template>

<script>
    export default {
        name: "",
        data(){
          return{
              mymoneyForAll:{},
              status: [{
                value: '投资',
                label: '投资'
              }, {
                value: '收益',
                label: '收益'
              }],
            currentPage:1,
            pagesize:4,
            value:'',
            mymoneytime:'',
            mymoneyHistory:{list:[]},
            drawer: false,userZong:{}
          }
        },
      created() {
          this.axios.get("/api/mymoney/mymoneyOfzong")
            .then((data)=>{
              this.mymoneyForAll=data.data
            }).catch(error =>{
              console.log("mymoneyOfzong"+error)
          })
        this.axios.post("/api/mymoney/mymoneyHistory2",{
          currentPage:this.currentPage,
          pagesize:this.pagesize,
        }).then((data)=>{
            this.mymoneyHistory=data.data
          }).catch(error =>{
          console.log("mymoneyHistory2" + error)
        })
      },
      methods: {
        /*侧拉框*/
        handleClick:function(row){
          this.drawer=true
          /*查询积分和用户信息*/
          this.axios.post("/api/mymoney/findmoneybyid",{zongId:row.zongId}).then((data)=>{
            this.userZong=data.data
          })
        },
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
        searchBycons:function () {
          if(this.mymoneytime!=''){
            this.axios.post("/api/mymoney/mymoneyHistory",{
              currentPage:this.currentPage,
              pagesize:this.pagesize,
              mymoneyKeyword:this.value,
              mymoneytime:this.mymoneytime,
            })
              .then((data)=>{
                this.mymoneyHistory=data.data
              }).catch(error=>{
                console.log("mymoneyHistory"+ error)
              }
            )
          }else{
            this.axios.post("/api/mymoney/mymoneyHistory",{
              currentPage:this.currentPage,
              pagesize:this.pagesize,
              mymoneyKeyword:this.value
            })
              .then((data)=>{
                console.log(data)
                this.mymoneyHistory=data.data
              }).catch(error=>{
              console.log("mymoneyHistory"+ error)
            })
          }
        },
        //返回时间戳的element的时间查验
        // dateFormat(row, column, cellValue, index) {
        //   const daterc = row[column.property]
        //   if (daterc != null) {
        //     const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
        //     const year = dateMat.getFullYear();
        //     const month = dateMat.getMonth() + 1;
        //     const day = dateMat.getDate();
        //     const hh = dateMat.getHours();
        //     const mm = dateMat.getMinutes();
        //     const ss = dateMat.getSeconds();
        //     const timeFormat = year + "-" + month + "-" + day;
        //     return timeFormat;
        //   }
        // },
      },
      //这个是返回2020-04-30T16:00:00.000+00:00的时间转换
      filters: {
        timefilters(val) {
          if (val == null || val == "") {
            return "暂无时间";
          } else {
            let d = new Date(val);   //val 为表格内取到的后台时间
            let month =
              d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
            let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
            let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
            let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
            let times=d.getFullYear() + '-' + month + '-' + day ;
            return times;
          }
        }
      },

    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
